HOW TO READ SYNTAX DIAGRAMS

INTRODUCTION

Syntax or "Railroad" diagrams are used to describe the syntax of statements in a language. The syntax of a language are the rules used to form legal statements in that language. In the syntax diagrams, we use lines and arrow heads to indicate the order of and repetition of parts of statements, as well as choices and options.

I chose to use strictly text characters (i.e., no graphic characters) in my diagrams. Since the greater than (>) and the less than (<) symbols are key symbols in HTML, I could not use them for arrow heads. (I did occasionally use "=>" to indicate that the syntax continued on the next line.) This lead to the following set of rules to be used when interpreting my syntax diagrams:

  1. All lines (or railroad tracks) are one-way.
  2. The direction of flow is left to right unless otherwise indicated.
  3. The arrow head (carat, "^", or "shift-6") is used to indicate the direction of a line. You must look carefully for these, they will be on the vertical members of the lines.
  4. Reserved words, or Key words are in all capital letters.
  5. All punctuation marks are required symbols.
  6. Words in lower case letters specify information that you supply.

EXAMPLES

Using the follow syntax diagram: 

        -- <HEAD> -- <TITLE> -- your title -- </TITLE> -- </HEAD> --|

We can note the order in which the elements of the Heading of an HTML document should appear. Any of the following are OK: 

<head>
<title>This is my document</title>
</head>

or

<HEAD><TITLE>This is my document</TITLE></HEAD>

Notice: Upper Case implies reserved words in the syntax diagrams, but do not imply that they must be capitalized in the actual document. In fact, in most cases, case does not matter.

The following diagrams illustrate 

        (A) --|


        (B) --|-------------|----=>
              |             ^
              |-- heading --|

        
        (C) --|-- <LI> -- list item -- | --
              ^                        | 
              |------------------------|

In the first diagram (A), the vertical line at the end of the line indicates the end of the diagram.

In the second diagram (B), the diagram indicates that the heading portion may be optional. Note the location of the carat (^) indicating that the lower line is also left to right. Also note that this diagram is to be continued with the next diagram because of the =>.

In diagram (C) we illustrate the possible repetition of the LI list item. Note that the carat (^) indicates that the lower line in the diagram is running right to left.

Go back to the index.

Or use the "Back" feature of your browser to go back to where you came from.